import React from "react";
import {Text, View, ScrollView, Alert} from "react-native";
import Button from "react-native-button";
import {styles} from "../App";

class HomeScreen extends React.Component {
    static navigationOptions = {
        title: '示例集合',
    };

    render() {
        return (
            <ScrollView>
                <View style={{
                    flex: 1,
                    flexDirection: 'column', // 主轴方向： 水平轴(row)方向排列，还是沿着竖直轴(column)方向排列
                    alignItems: 'stretch', // 次轴（与主轴垂直的轴，比如若主轴方向为row，则次轴方向为column）的排列方式 ： flex-start、center、flex-end以及stretch
                    justifyContent: 'flex-start', //  子元素沿着主轴的排列方式：flex-start、center、flex-end、space-around、space-between以及space-evenly。
                    marginBottom: 16,
                }}>
                    <Button style={styles.button} onPress={() => this.props.navigation.navigate('Sample')}>官方示例</Button>
                    <Button style={{
                        color: 'red',
                        padding: 10,
                        backgroundColor: 'yellow',
                        margin: 16,
                        borderRadius: 20,
                    }}
                            onLongPress={() => Alert.alert("长按事件")}
                            onPress={() => this.props.navigation.navigate('Details')}>按钮样式</Button>
                    <Button style={styles.button}
                            onPress={() => this.props.navigation.navigate('Details')}> 演示跳转</Button>
                </View>
            </ScrollView>

        );
    }
}

export default HomeScreen